<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <th:block th:include="/pc/include :: header('详情')"/>
    <link th:href="@{/pc/css/details.css}" rel="stylesheet"/>
</head>
<body>
<div id="head">
    <div class="head-1" style="font-size: 20px;">
        <span><a href="/pc/index">首页</a></span>

        <a th:if="${session.userInfo}"
           href="/pc/center" style="float: right;color: #FB6302">
            <span th:if="${session.userInfo}">
                <img th:src="(${#strings.isEmpty(session.userInfo.avatar)}) ? @{/img/profile.jpg} : @{${session.userInfo.avatar}}"
                     class="img-circle"
                     style="width: 25px;height: 25px"
                     alt="User Image">&nbsp;&nbsp;[[${session.userInfo.userName}]]
            </span>
            &nbsp;&nbsp;&nbsp;个人中心
        </a>

        <a th:if="!${session.userInfo}"
           href="/login" style="float: right;color: #FB6302"> &nbsp;&nbsp;&nbsp;登录 </a>

    </div>
</div>
<div id="good">
    <div class="good-left">
        <ul>
            <li class="active"><img th:src="${petInfo.img}" style="height: 66px;width: 66px;"/></li>
        </ul>
    </div>
    <div class="good-middle">
        <div id="img1">
            <img th:src="${petInfo.img}" style="height: 300px;width: 482px;"/>
        </div>
    </div>
    <div class="good-right">
        <h1 style="font-size: 28px;">[[${petInfo.name}]] </h1>
        <div style="color: #616161;font-size: 18px;margin-top: 8px;">
            类型：<span style="font-size: 18px;" th:text="${petInfo.typeName}"></span>
        </div>
        <div style="color: #616161;font-size: 18px;margin-top: 8px;">
            库存：<span style="font-size: 18px;" th:text="${petInfo.count}"></span>
        </div>
        <div class="jiaqian">
            <span style="font-size: 28px;font-weight: bold;color: #ff6700;">￥[[${petInfo.price}]] </span><span
                style="color: #ff6700;font-size: 18px;font-weight: bold;">元</span>
        </div>
        <div class="car">
            <div class="shopcar" th:data-id="${petInfo.id}" onclick="yuDing(this)">
                购买
            </div>
            <div class="shopcar" th:data-id="${petInfo.id}" th:onclick="|collection(${petInfo.id})|">
                收藏
            </div>
            <div class="shopcar" th:data-id="${petInfo.id}" th:onclick="|addCar(${petInfo.id})|">
                加入购物车
            </div>
        </div>
    </div>
</div>
<div id="img-head" style="margin-top: -151px;">
    <div class="cankao">
        <h1>详情</h1>
    </div>
    <div style="margin: 0 334px;" th:utext="${petInfo.content}"></div>
</div>




<th:block th:include="include :: footer"/>
<script th:inline="javascript">

    function yuDing(e) {
        var user = [[${session.userInfo}]];
        if (!user) {
            $.modal.alertError("请登录");
            return;
        }
        let id = e.getAttribute('data-id');
        var editUrl = ctx + "pc/petOrder/add?petId=" + id;
        $.modal.open("下单", editUrl, '700', '870');
    }


    var lunbos = document.querySelectorAll("#lunbo li");
    for (var i = 0; i < lunbos.length; i++) {
        lunbos[i].setAttribute("index", i);
        lunbos[i].addEventListener("click", function () {
            var chang = document.getElementById("chang");
            var a = this.getAttribute("index");
            var left = parseFloat(document.defaultView.getComputedStyle(chang, null).left);
            if (a == 0) {
                if (left == -3678) {
                    chang.style.animation = "myfirst2 1s";
                    chang.style.left = 0 + "px";
                } else if (left == -2452) {
                    chang.style.animation = "myfirst1 1s";
                    chang.style.left = 0 + "px";
                } else {
                    chang.style.animation = "myfirst 1s";
                    chang.style.left = 0 + "px";
                }
            }
            if (a == 1) {
                if (left == 0) {
                    chang.style.animation = "myfirst3 1s";
                    chang.style.left = -1226 + "px";
                } else if (left == -2452) {
                    chang.style.animation = "myfirst8 1s";
                    chang.style.left = -1226 + "px";
                } else {
                    chang.style.animation = "myfirst9 1s";
                    chang.style.left = -1226 + "px";
                }
            }
            if (a == 2) {
                if (left == 0) {
                    chang.style.animation = "myfirst4 1s";
                    chang.style.left = -2452 + "px";
                } else if (left == -1226) {
                    chang.style.animation = "myfirst6 1s";
                    chang.style.left = -2452 + "px";
                } else {
                    chang.style.animation = "myfirst11 1s";
                    chang.style.left = -2452 + "px";
                }
            }
            if (a == 3) {
                if (left == 0) {
                    chang.style.animation = "myfirst5 1s";
                    chang.style.left = -3678 + "px";
                } else if (left == -1226) {
                    chang.style.animation = "myfirst7 1s";
                    chang.style.left = -3678 + "px";
                } else {
                    chang.style.animation = "myfirst10 1s";
                    chang.style.left = -3678 + "px";
                }
            }
            var ul = this.parentNode;
            var ls = ul.children;
            for (var i = 0; i < ls.length; i++) {
                ls[i].removeAttribute("class");
            }
            this.className = "active7";
        });
    }

    function addEvaluation() {
        var user = [[${session.userInfo}]];
        if (!user) {
            $.modal.alertError("请登录");
            return;
        }
        var conent = $("#conent").val();
        if (!conent) {
            $.modal.msgError("内容不能为空");
            return
        }
        $.ajax({
            type: "post",
            url: "/system/evaluation/add",
            data: $('#form-menu-add').serialize(),
            success: function (r) {
                layer.alert("评论成功", {
                        icon: 1,
                        title: "系统提示"
                    },
                    function (index) {
                        //关闭弹窗
                        layer.close(index);
                        window.location.reload();
                    });
            }
        });
    }

    function collection(id) {
        var user = [[${session.userInfo}]];
        if (!user) {
            $.modal.alertError("请登录");
            return;
        }
        $.ajax({
            type: "post",
            url: "/system/collect/add",
            data: {petId: id},
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    layer.alert("收藏成功", {
                            icon: 1,
                            title: "系统提示"
                        },
                        function (index) {
                            //关闭弹窗
                            layer.close(index);
                            window.location.reload();
                        });
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        });
    }

    function addCar(id) {
        var user = [[${session.userInfo}]];
        if (!user) {
            $.modal.alertError("请登录");
            return;
        }
        $.ajax({
            type: "post",
            url: "/system/petCar/add",
            data: {petId: id},
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    layer.alert("加入成功", {
                            icon: 1,
                            title: "系统提示"
                        },
                        function (index) {
                            //关闭弹窗
                            layer.close(index);
                            window.location.reload();
                        });
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        });
    }

</script>
</body>

</html>
